<template>
  <div class="page-container">
    <div class="app-container__body is-has-header TemplateSelect">
        <div class="body_title">
        	 <div class="pull-right">
        	 		<a-button type="primary" @click="onTemplateBuild()">搭建店铺 <i class="el-icon-arrow-right"></i></a-button>
        	 </div>
        	 <h3>模板选择</h3>
        </div>
        <div class="body_content">
        		<el-radio-group v-model="selectTemplate">
        			<ul>
        				 <li>
        				 		<strong>预览</strong>
        				 		<el-radio :label="0">
								    		<div class="tit">
								    				<h3>经典版</h3>
								    				<p>&nbsp;&nbsp;</p>
								    		</div>
								    		<div class="imgbox">
								    			  <img src="../../assets/images/ver_page1.jpg"/>
								    		</div>
								    </el-radio>
        				 </li>
        				 <li>
        				 		<strong>预览</strong>
        				 		<el-radio :label="1" disabled>
								    		<div class="tit">
								    				<h3>畅销版</h3>
								    				<p>(暂未开放敬请期待)</p>
								    		</div>
								    		<div class="imgbox">
								    			  <img src="../../assets/images/ver_page2.jpg"/>
								    		</div>
								    </el-radio>
        				 </li>
        				 <li>
        				 		<el-radio :label="2" disabled>
								    		<div class="tit">
								    				<h3>定制版</h3>
								    				<p>(仅高级版本用户可申请)</p>
								    		</div>
								    		<div class="imgbox">
								    			  <img src="../../assets/images/ver_page3.jpg"/>
								    		</div>
								    </el-radio>
        				 </li>
        			</ul>
					  </el-radio-group>
        </div>
    </div>
  </div>

</template>

<script>
    import { mapGetters } from 'vuex'
    export default {
        name: "TemplateList",
        components:{
		    },
        computed: {
          ...mapGetters([
            'companyId',
          ])
        },
		    data(){
		        return{
		          headerTabName:'TemplateBuild',
		          selectTemplate:0,
		        }
		    },
		    watch:{
		    },
		    methods:{
          onTemplateBuild(){

              this.$router.push({path:'/templateBuild',query:{id:this.companyId}});
          }
		    },
        mounted(){
          console.log("companyId==",this.companyId);
        }
    }
</script>

<style lang="scss" scoped>
	.app-container__body{
		padding:20px 20px 60px 20px;
		min-height: calc(100vh - 104px);
		background-color: #fff;
		border-radius:10px;
	}
	.app-container__body.is-has-header{ min-height:calc(100vh - 150px); margin-top:44px;}
	.TemplateSelect .el-radio-group{
		width: 100%;
	}
	.TemplateSelect ul{
		display: flex;
		justify-content: space-between;
	}
	.TemplateSelect li{
		height: auto;
		overflow: hidden;
		position: relative;
		float: left;
		width: 320px;
	}
	.TemplateSelect li strong{
		position: absolute;
		top: 10px;
		right: 10px;
		padding: 10px 20px;
		display:block;
		color: #999;
		font-weight: normal;
		font-size: 14px;
		text-decoration:underline;
		z-index: 100;
		cursor: pointer;
	}
	.TemplateSelect li .el-radio{
		border: 2px #dddddd solid;
		width: 100%;
		height: auto;
		overflow: hidden;
		text-align: center;
		height: 450px;
		position: relative;
	}
	.TemplateSelect li .el-radio.is-checked{
		border-color: #2BB89A;
	}
	.TemplateSelect li .el-radio .el-radio__input{
		position: absolute;
		top:35px;
		left: 0;
		text-align:center;
		width:100%;
		padding-right:78px;

	}
	.TemplateSelect li .el-radio .tit{
		margin-top: 20px;
	}
	.TemplateSelect li .el-radio h3{
		font-size: 18px;
		font-weight: normal;
	}
	.TemplateSelect li .el-radio p{
		font-size: 12px;
		color: #999;
	}
	.TemplateSelect li .el-radio .imgbox{
		width: 150px;
		height: 270px;
		margin:30px auto;
		overflow: hidden;
		box-shadow:0 0 10px rgba(0,0,0,0.3);
	}
	.TemplateSelect li .el-radio .imgbox img{
		width:100%;
		height:100%;
		display: block;
	}
	.TemplateSelect .body_content{
		padding-top: 50px;
	}
</style>
